var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 0,
    loop: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false
});
const img = document.querySelector('.product .img')
const news = document.querySelector('.news .items')
const footer = document.querySelector('.footer')
const sign = document.querySelector('.sign')
const navs = document.querySelectorAll('.con_bar li')
const bars = document.querySelectorAll('.navbar')
navs.forEach(item => {
    item.onmouseenter=()=>{
        item.classList.add('hover')
    }
    item.onmouseleave=()=>{
        item.classList.remove('hover')
    }
});
window.addEventListener('scroll', () => {
    const scrollPosition = window.scrollY + 100;
    bars.forEach(item => {
        const barTop = item.offsetTop;
        const barHeight = item.offsetHeight;
        const barid = item.getAttribute('id');
        if (scrollPosition >= barTop && scrollPosition < barTop + barHeight) {
            navs.forEach(item => {
                item.classList.remove('br');
            });
            const activeNavItem = document.querySelector(`.con_bar li a[href="#${barid}"]`).parentNode;
            activeNavItem.classList.add('br');
        }
    });
});
fetch('https://app2.motie.com/pc/wenxue')
.then(res=>res.json())
.then(res1=>{
    img.innerHTML = `
        <div class="left">
            <img src="${res1.data.incubationCase.templateList[0].imgUrl}" alt="" class='movie'>
            <div class='div'>
                <img src="${res1.data.incubationCase.templateList[1].imgUrl}" alt="">
                <img src="${res1.data.incubationCase.templateList[2].imgUrl}" alt="">
            </div>
        </div>
        <div class="center">
            <img src="${res1.data.incubationCase.templateList[3].imgUrl}" alt="">
            <img src="${res1.data.incubationCase.templateList[4].imgUrl}" alt="">
        </div>
        <div class="right">
            <img src="${res1.data.incubationCase.templateList[5].imgUrl}" alt="">
        </div>
    `
    const newsArr = res1.data.dynamic.templateList.slice(0,4)
    newsArr.forEach(element => {
        news.innerHTML+=`
            <div class="item">
                <div class="newsImg">
                    <img onclick="toDetail('${element.url}')" src="${element.imgUrl}" alt="">
                </div>
                <p class="con">${element.content}</p>
                <div class="txt">
                    <span class="tag">新闻</span>
                    <span class="time">${element.name}</span>
                    <span class="read">阅读详情></span>
                </div>
            </div>
        `
    });
    res1.data.footer.templateList.forEach(item=>{
        footer.innerHTML+=`
            <div class="moudle">
                <span>${item.name}</span>
                <p>${item.content}</p>
                <p>${item.tag}</p>
                <p>${item.url}</p>
            </div>
        `
    })
    const webArr = res1.data.groupIntro.templateList.slice(0,4)
    webArr.forEach((item,index)=>{
        sign.innerHTML+=`
            <div id="jump${index}" class="web">
                <img src="${item.imgUrl}" alt="">
                <div class="webIntro">
                    <p>${item.name}</p>
                    <span>
                        ${item.content}
                    </span>
                </div>
            </div>
        `
    })
    document.getElementById("jump0").onclick=()=>{
        window.location.href="./hzhlaikan.html"
    }
    document.getElementById("jump1").onclick=()=>{
        window.location.href="./jinwenshouye.html"
    }
    document.getElementById("jump2").onclick=()=>{
        window.location.href="./momoMain.html"
    }
    document.getElementById("jump3").onclick=()=>{
        window.location.href="./bookIndex.html"
    }
}).catch(err=>{
    console.log(err)
})
const toDetail=(i)=>{
    window.location.href=i
}
